<template>
  <div class="resumeItemContainer">

    <div class="displayBlock" v-if="!editStatus">
      <div class="basicDisplayLeft">
        <div class="basicDisplayName">
          {{ resumeData.iname }}
          <div class="resumeItemBasicEditButtons">
            <span class="resumeItemDisplayItemEditButton" @click="changeEditStatusForSingle(true)">
              <img :src="myResumeEditIcon" /> 编辑</span>
          </div>
        </div>
        <div class="basicDisplayInfo">
          <span class="basicDisplayInfoItem" v-if="resumeData.gznum">
            {{ resumeData.gznum }}年工作经验
          </span>
          <span class="basicInfoDivideDot" v-if="resumeData.Nianling_p">
            ·
          </span>
          <span class="basicDisplayInfoItem" v-if="resumeData.Nianling_p">
            {{ resumeData.Nianling_p }}岁
          </span>
          <span class="basicInfoDivideDot" v-if="resumeData.Edu_p"> · </span>
          <span class="basicDisplayInfoItem" v-if="resumeData.Edu_p">
            {{ resumeData.Edu_p }}
          </span>
          <span class="basicInfoDivideDot" v-if="resumeData.rctypeId&&resumeData.Edu_p"> · </span>
          <span class="basicDisplayInfoItem" v-if="resumeData.rctypeId">
            {{ resumeData.rctypeId == 1 ? "社会人才" : "应届生" }}
          </span>
        </div>
        <div class="basicDisplayContact">
          <span class="basicDisplayPhone">
            <img src="//img3.job1001.com/ypMp/elan/images/resume/phone_new.png" alt="" />
            {{ resumeData.Shouji_p || "未填写" }}</span>
          <span class="basicDisplayWechat">
            <img src="//img3.job1001.com/ypMp/elan/images/resume/mail_new.png" alt="" />
            {{ resumeData.wechat || "未填写" }}</span>
        </div>
      </div>
      <div class="basicDisplayRight">
        <img :src="resumeData.src_p" alt="" class="basicDisplayAvatar" v-show="resumeData.src_p" />
      </div>
    </div>
    <div class="EditBlock" v-else :id="editStatus?'edittingBlock':''">
      <div class="editTitle">
        <span>基本信息</span>
      </div>
      <el-form ref="editForm" :model="editForm" class="editForm" inline :rules="rules">
        <el-form-item prop="iname" label="姓名">
          <el-input v-model="editForm.iname" placeholder="请输入姓名" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <div class="genderbuttonsContainer">
            <div type="primary" class="genderButton" :class="{ active: editForm.sex == '男' }"
              @click="handleGenderButton('男')">
              男
            </div>
            <div type="primary" class="genderButton" :class="{ active: editForm.sex == '女' }"
              @click="handleGenderButton('女')">
              女
            </div>
          </div>
        </el-form-item>
        <el-form-item class="avatar-uploader-item">
          <el-upload class="avatar-uploader" action="//upload.yl1001.com/upload/images/save" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="editForm.src_p" :src="editForm.src_p" class="avatarEditImg" />
            <div class="avatar-uploader-button" v-else>
              上传头像 {{ editForm.src_p }}
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="rctypeId" label="职场身份">
          <el-select v-model="editForm.rctypeId" placeholder="请选择职场身份" :style="{ width: '100%' }">
            <el-option v-for="item in rctypeIdOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="Bday_p" label="出生日期">
          <el-date-picker v-model="editForm.Bday_p" type="date" placeholder="请选择出生日期" @change="handleBdayChange"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{ width: '100%' }"></el-date-picker>
        </el-form-item>
        <el-form-item prop="hkb" label="现居地">
          <el-cascader ref="basicInfo_hkb_cascader" :visible.sync="cascaderVisibleStates.basicInfo_hkb_cascader"
            v-model="editForm.hkb" filterable :options="regionData" :props="cascaderProps" @change="handleRegionChange"
            :style="{ width: '100%' }" clearable placeholder="请选择现居地" />
        </el-form-item>
        <el-form-item prop="hka" label="籍贯">
          <el-cascader ref="basicInfo_hka_cascader" :visible.sync="cascaderVisibleStates.basicInfo_hka_cascader"
            v-model="editForm.hka" filterable :options="regionData" :props="cascaderProps" @change="handleRegionChange"
            :style="{ width: '100%' }" clearable placeholder="请选择你的籍贯" />
        </el-form-item>
        <el-form-item prop="start_workdate" label="工作时间">
          <el-date-picker v-model="editForm.start_workdate" type="date" placeholder="请选择参加工作时间"
            :style="{ width: '100%' }"></el-date-picker>
        </el-form-item>
        <el-form-item prop="Shouji_p" label="手机">
          <el-input v-model="editForm.Shouji_p" placeholder="请输入手机号" :maxlength="20" readonly
            @focus="showPhoneForm('mobile')"></el-input>
        </el-form-item>
        <el-form-item prop="Email_p" label="邮箱">
          <el-input v-model="editForm.Email_p" placeholder="请输入邮箱" :maxlength="20" readonly
            @focus="showPhoneForm('email')"></el-input>
        </el-form-item>
        <el-form-item prop="wechat" label="微信">
          <el-input v-model="editForm.wechat" placeholder="请输入微信" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="submitButtons">
            <el-button size="small" @click="handleCancel">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSave">完 成</el-button>
          </div>
        </el-form-item>
      </el-form>
      <dialogBindCode :dialogFormVisible.sync="dialogFormVisible" :type.sync="dialogType" :dialogData.sync="dialogData"
        @changeBind="handleBindChange"></dialogBindCode>
    </div>
  </div>
</template>
<!-- 
  提示：一些共同的变量和方法，可以抽取到mixin中，具体看代码
 -->
<script>
import myResumeItemsMixin from "@/mixin/myResumeItemsMixin.js";
import { region } from "@/components/SelectRegion/region.js";
import dialogBindCode from "./components/dialogBindCode.vue";
export default {
  name: "basicInfo",
  mixins: [myResumeItemsMixin],
  components: {
    dialogBindCode,
  },
  props: {
    resumeData: {
      type: Object,
      default: () => ({}),
    },
    editStatus: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      regionData: region,
      editForm: {
        iname: "", //姓名
        gznum: "", //工作年限
        sex: "", //性别
        Hka_p: "", //籍贯地区
        hka: "", //暂时保存
        Hkb_p: "", //现居地地区
        hkb: "", //暂时保存
        rctypeId: "", //职场身份 1:社会人才 0:学生
        src_p: "", //头像
        Shouji_p: "", //手机号
        Email_p: "", //邮箱
        wechat: "", //微信号
        JobType_p: "", //职位类型
        Nianling_p: "", //年龄
        Edu_p: "",
        Bday_p: "", //出生日期
        Bday_pArr: [], //暂时保存
      },
      rctypeIdOptions: [
        { value: 1, label: "社会人才" },
        { value: 0, label: "应届生" },
      ],
      cascaderProps: {
        checkStrictly: true, // 严格检查，不自动勾选父级
        value: "value",
        label: "label",
        children: "children",
        emitPath: false, // 不返回完整的路径，只返回最终选中的值
      },
      rules: {
        iname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "姓名长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        Bday_p: [
          { required: true, message: "请选择出生日期", trigger: "change" },
        ],
        rctypeId: [
          { required: true, message: "请选择职场身份", trigger: "change" },
        ],
        hkb: [{ required: true, message: "请选择现居地", trigger: "change" }],
        hka: [{ required: true, message: "请选择籍贯", trigger: "change" }],
        start_workdate: [
          { required: true, message: "请选择参加工作时间", trigger: "change" },
        ],
        wechat: [
          { required: false, message: "请输入微信号", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "微信号长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      dialogFormVisible: false,
      dialogData: "",
      dialogType: "",
    };
  },
  created() {
    if (localStorage.getItem("notFirstTimeInResume")) {
      this.$emit("update:editStatus", true);
    } else {
      localStorage.setItem("notFirstTimeInResume", true);
    }
  },
  watch: {
    resumeData: {
      handler(newValue, oldValue) {
        // console.log("基本信息更新：-------->", newValue);
        this.$set(this, "editForm", { ...newValue });
        this.$set(
          this.editForm,
          "hka",
          newValue.person_info.hka == 0 ? "" : newValue.person_info.hka
        );
        this.$set(
          this.editForm,
          "hkb",
          newValue.person_info.hkb == 0 ? "" : newValue.person_info.hkb
        );
        this.$set(this.editForm, "bday", newValue.person_info.bday);
        this.$set(this.editForm, "wechat", newValue.wechat);
      },
    },
  },
  methods: {
    handleBdayChange(val) {
      //console.log("val", val);
    },
    async handleSave() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if (this.editForm.rctypeId == 0) {
            this.editForm.gznum = "0";
          }
          const finalParams = {
            op: "person_info_busi",
            func: "updatePersonDetail",
            version: "v7.8.5",
            forName: "iphone",
            person_id: this.personId,
            param: {
              param: {
                where: `id='${this.personId}'`,
                personId: this.personId,
                start_workdate: this.editForm.start_workdate,
                wechat: this.editForm.wechat,
                update: [
                  {
                    columnName: "iname",
                    columnValue: this.editForm.iname,
                  },
                  {
                    columnName: "sex",
                    columnValue: this.editForm.sex,
                  },
                  {
                    columnName: "bday",
                    columnValue: this.editForm.Bday_p,
                  },
                  {
                    columnName: "rctypeId",
                    columnValue: this.editForm.rctypeId,
                  },
                  {
                    columnName: "gznum",
                    columnValue: this.editForm.gznum,
                  },
                  {
                    columnName: "hka", //籍贯
                    columnValue: this.editForm.hka,
                  },
                  {
                    columnName: "hkb", //现居地
                    columnValue: this.editForm.hkb,
                  },
                  {
                    columnName: "regionid", //现居地
                    columnValue: this.editForm.hkb,
                  },
                  {
                    columnName: "pic",
                    columnValue: this.editForm.src_p,
                  },
                ],
              },
            },
          };
          this.resumeGeneralInterface(
            finalParams,
            () => {
              this.changeEditStatusForSingle(false);
            },
            () => {}
          );
        } else {
        }
      });
    },
    handleCancel() {
      this.changeEditStatusForSingle(false);
      this.editForm = { ...this.resumeData };
      this.editForm.hka =
        this.resumeData.person_info.hka == 0
          ? ""
          : this.resumeData.person_info.hka;
      this.editForm.hkb =
        this.resumeData.person_info.hkb == 0
          ? ""
          : this.resumeData.person_info.hkb;
      this.editForm.bday = this.resumeData.person_info.bday;
      this.editForm.wechat = this.resumeData.wechat;
    },
    handleRegionChange(val) {
      console.log("val", this.editForm);
    },
    handleGenderButton(gender) {
      this.editForm.sex = gender;
    },
    handleAvatarSuccess(res, file) {
      //console.log("res.data", res.data);

      this.editForm.src_p = res.data[0];

      //console.log(" this.editForm.src_p", this.editForm);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
    },
    showPhoneForm(value) {
      this.dialogType = value;
      if (value == "mobile") {
        this.dialogData = this.editForm.Shouji_p;
      } else {
        this.dialogData = this.editForm.Email_p;
      }
      this.dialogFormVisible = true;
      console.log(
        "-------->value",
        value,
        this.dialogData,
        this.dialogFormVisible
      );
    },
    handleBindChange(value) {
      if (this.dialogType == "mobile") {
        this.editForm.Shouji_p = value;
      } else {
        this.editForm.Email_p = value;
      }
      this.dialogFormVisible = false;
      this.dialogType = "";
      this.dialogData = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.resumeItemContainer {
  position: relative;
  // overflow-y: visible;
  // height: 500px;
  &:hover {
    .resumeItemBasicEditButtons {
      display: block !important;
    }
  }
  .displayBlock {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    // padding-right: 0px;
    &:hover {
      background: #f8f8f8;
      border-radius: 8px;
    }
    .basicDisplayLeft {
      .basicDisplayName {
        display: flex;
        align-items: center;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 24px;
        color: #333333;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-bottom: 23px;

        .resumeItemBasicEditButtons {
          display: none;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #4880ff;
          line-height: 18px;
          & > span {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            margin-left: 23px;
            user-select: none;
            & > img {
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
          }
        }
      }
      .basicDisplayInfo {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #333333;
        line-height: 21px;
        text-align: left;
        font-style: normal;
        margin-bottom: 12px;
        .basicInfoDivideDot {
          margin: 0 2px;
        }
      }
      .basicDisplayContact {
        & > span {
          display: inline-flex;
          align-items: center;
        }
        .basicDisplayPhone {
          margin-right: 28px;
        }
        img {
          width: 14px;
          height: 14px;
          margin-right: 8px;
        }
      }
    }
    .basicDisplayRight {
      width: 80px;
      height: 80px;
      .basicDisplayAvatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 1px solid #dbdbdb;
      }
    }
  }
  .EditBlock {
    padding: 16px;
    background: #f8f8f8;
    border-radius: 8px;
    .editTitle {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 18px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-bottom: 19px;
    }
    .editForm {
      ::v-deep .el-form-item {
        display: inline-flex;
        flex-direction: column;
        min-width: 251px;
        width: calc(33% - 40px);
        margin-right: 24px;
        margin-bottom: 16px;
        margin-top: 0px;
        .el-form-item__label {
          height: 22px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666660;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
      .genderbuttonsContainer {
        display: flex;
        width: 100%;
        .genderButton {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 89px;
          height: 40px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #cdcdcd;
          color: #666666;
          margin-right: 8px;
          cursor: pointer;
          &.active {
            background: rgba(72, 128, 255, 0.05);
            border-radius: 4px;
            border: 1px solid #4880ff;
            color: #4880ff;
          }
        }
      }
      .avatar-uploader-item {
        display: inline-flex;
        justify-content: flex-end;
        .avatar-uploader {
          width: 100%;
          display: inline-flex;
          justify-content: flex-end;
          .avatar-uploader-button {
            width: 80px;
            height: 80px;
            background: #d8d8d8;
            border-radius: 50%;
            padding: 18px 24px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #666660;
            line-height: 22px;
            text-align: left;
            font-style: normal;
          }
          .avatarEditImg {
            border-radius: 50%;
            width: 80px;
            height: 80px;
          }
        }
      }
      .submitButtons {
        display: flex;
        justify-content: flex-end;
        position: relative;
        top: 24px;
        right: 0;
        .el-button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 30px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #cdcdcd;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 14px;
          text-align: left;
          font-style: normal;
          padding: 0;
          &.el-button--primary {
            width: 100px;
            height: 30px;
            background: #4880ff;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
